<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>学习Vue</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h3> app1---data 数据 </h3>
<p>------------------------------------------------</p>
<div id="app1">{{a}}</div>

<h3>app2---methods方法，验证Object.freeze 的效果</h3>
<p>-----------------------------------------------</p>
<div id="app2">
	{{foo}}
	<button v-on:click="foo='Test'">Change It</button>
	<button v-on:click="changeItABC">用ChangeItABC</button>
	<button v-on:click="changeItXYZ">用ChangeItXYZ</button>
</div>


<h3>app3---生命周期的钩子</h3>
<p>----------------------------------------</p>
<div id="app3">
	{{v}}
	<button v-on:click="change">change</button>
</div>

</body>
<script type="text/javascript">
//app1	
var data = { a: 1 } 
var vm = new Vue({
  el:'#app1',
  data: data
})

console.log(vm.a == data.a)

vm.a = 2
console.log ("VM.a:"+data.a) 

data.a = 3
console.log ("data.a"+vm.a) 
console.log (vm.$data)
console.log (vm.$data.a)

//------------------------------------------------

//app2
var obj={
	foo:'bar'
}

//验证Object.freeze 的效果 
// Object.freeze(obj)
var vm1=new Vue({
	el: '#app2',
	data: obj,
	methods: {
		changeItABC: function(){
			this.foo="abc"
		},
		changeItXYZ:function(){
			this.foo="XYZ"
		}
	}
})

//App3
var app3=new Vue({
	el: '#app3',
	data: {
		v:"Test1"
	},
	methods:{
		change:function(){
			this.v="改变Test"
		}
	},
	created: function(){
    	console.log('created 用法， V is: ' + this.v)
    },
    mounted: function () {
    	console.log('mounted 用法， V is: ' + this.v)
    },
    updated: function () {
    	console.log('updated 用法， V is: ' + this.v)
    }
})

</script>
<style type="text/css">
	p{color: red;}
</style>
</html>